<template>
  <!-- tinymce -->
  <div id="myTiny"></div>
  <button @click="send">发送</button>
  <button @click="set">设置</button>
  <!-- @tinymce/tinymce-vue -->
  <!-- <Editor/> -->
  
</template>

<script setup lang="ts">
import tinymce from "tinymce";
// import Editor from '@tinymce/tinymce-vue'
import { onMounted } from "vue";
onMounted(() => {
  tinymce.init({
    selector: "#myTiny", // tinymce存放的元素sd
    statusbar: false, // 状态栏的开关
    // toolbar: false,  // 工具栏的开关
    toolbar: "image code | undo redo | styles | bold italic | star ", // 或者写成字符串的形式更改 哪些工具可以存在
    // menubar: false,  // 菜单栏的开关
    menubar: 'file edit',  // 或者写成字符串的形式
    menu: {
      file: {
        title: "File",
        items:
          "newdocument restoredraft | preview | importword exportpdf exportword | print | deleteallconversations",
      },
      edit: {
        title: "Edit",
        items:
          "undo redo | cut copy paste pastetext | selectall | searchreplace",
      },
      view: {
        title: "View",
        items:
          "code revisionhistory | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments",
      },
      insert: {
        title: "Insert",
        items:
          "image link media addcomment pageembed codesample inserttable | math | charmap emoticons hr | pagebreak nonbreaking anchor tableofcontents | insertdatetime",
      },
      format: {
        title: "Format",
        items:
          "bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | language | removeformat",
      },
      tools: {
        title: "Tools",
        items: "spellchecker spellcheckerlanguage | a11ycheck code wordcount",
      },
      table: {
        title: "Table",
        items:
          "inserttable | cell row column | advtablesort | tableprops deletetable",
      },
      help: { title: "Help", items: "help" },
    }, // 通过menu可以确定菜单栏可以拥有哪些子选项
    // skin: 'oxide-dark'   // 皮肤控制
    skin_url: "myskin", //  自定义皮肤 public/myskin的content.css和skin.css
    // // 全局css影响皮肤进行微调
    content_css: "/mycontent.css", // 对内容去进行微调
    // icons_url: "/myicon.js", // 直接替换图片icon
    language: "zh_CN", // 更改语言为中文,
    plugins: 'image code star',
  });
});
const send = () => {
  // let content = tinymce.activeEditor?.getContent()
  let content = tinymce.activeEditor?.getContent({format: 'text'})
}
const set = () => {
  tinymce.activeEditor?.selection.getContent() //获取选中的内容
  // tinymce.activeEditor?.setContent('沃尔沃热舞') // 获取所有文本内容
  // tinymce.activeEditor?.setContent(`<p style='color: green'>时代峰峻啊快点过</p>`)
  tinymce.activeEditor?.selection.setContent(`<p class='p_content'>陌生地方那是的</p>`)
}
</script>

<style lang="less">
// 全局css影响皮肤
.tox-toolbar__primary {
  background: #000 !important;
}

</style>
